<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Accounts Page - Dashboard Template</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600">
    <!-- https://fonts.google.com/specimen/Open+Sans -->
    <link rel="stylesheet" href="css/fontawesome.min.css">
    <!-- https://fontawesome.com/ -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- https://getbootstrap.com/ -->
    <link rel="stylesheet" href="css/tooplate.css">
</head>

<body class="bg05">
<div class="container">
    <div class="row">
        <div class="col-12">
            <nav class="navbar navbar-expand-xl navbar-light bg-light" style="border-radius: 5px;">
                <a class="navbar-brand" href="#">
                    <i class="fas fa-3x fa-tachometer-alt tm-site-icon"></i>
                    <h1 class="tm-site-title mb-0">个人中心</h1>
                </a>
                <button class="navbar-toggler ml-auto mr-0" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="personal.html">我的订单
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="accounts.html">我的账户</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="update.html">修改用户信息</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link d-flex" href="index.html">
                                <i class="far fa-user mr-2 tm-logout-icon"></i>
                                <span>返回前台</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <!-- row -->
    <div class="row tm-content-row tm-mt-big ">
        <div class="col-xl-8 col-lg-12 tm-md-12 tm-sm-12 tm-col container">
            <div class="bg-white tm-block h-100">
                <div class="row">
                    <div class="col-md-8 col-sm-12" style="margin-left: 38%;">
                        <h3 class="tm-block-title d-inline-block">修改用户信息</h3>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <form action="" class="tm-signup-form">
                            <div class="form-group">
                                <label for="name">账户名称</label>
                                <input placeholder="" id="name" name="name" type="text" class="form-control validate"
                                       style="border-radius: 5px;">
                            </div>
                            <div class="form-group">
                                <label for="email">账户邮箱</label>
                                <input placeholder="" id="email" name="email" type="email" class="form-control validate"
                                       style="border-radius: 5px;">
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input placeholder="" id="password" name="password" type="password"
                                       class="form-control validate" style="border-radius: 5px;">
                            </div>
                            <div class="form-group">
                                <label for="password2">确认密码</label>
                                <input placeholder="" id="password2" name="password2" type="password"
                                       class="form-control validate" style="border-radius: 5px;">
                            </div>
                            <div class="form-group">
                                <label for="phone">电话</label>
                                <input placeholder="#" id="phone" name="phone" type="tel" class="form-control validate"
                                       style="border-radius: 5px;">
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-12 col-sm-4">
                                    <button type="submit" class="btn btn-primary" style="border-radius: 5px;">编辑
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="tm-col tm-col-small">
            <div class="bg-white tm-block">
                <h2 class="tm-block-title">更换头像</h2>
                <img src="img/profile-image.png" alt="Profile Image" class="img-fluid">
                <hr>
                <div class="custom-file mt-3 mb-3">
                    <input id="fileInput" type="file" style="display:none;" />
                    <input type="button" class="btn btn-primary d-block mx-xl-auto" value="编辑" onclick="document.getElementById('fileInput').click();" style="border-radius: 5px;"/>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- https://jquery.com/download/ -->
    <script src="js/bootstrap.min.js"></script>
    <!-- https://getbootstrap.com/ -->
</body>

</html>